<template>
    <div class="maind" style="padding-top:40px ;height: calc(100% - 5px);">
        <main>
            <el-header>
                <el-input placeholder="搜索参数" size="small" clearable v-model="queryInfo.key"
                    @clear="lookresetForm()"></el-input>
                <el-dropdown split-button @click="getassignmentList()" class="look" size="small"
                    @command="handleCommand" style="margin-right: 15px;">
                    查询
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="a">高级查询</el-dropdown-item>
                        <el-dropdown-item command="b">重置查询</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!-- 高级查询 -->
                <el-dialog title="高级查询" :visible.sync="dialoglook">
                    <el-form :model="queryInfo" :rules="rules" ref="queryInfo" label-width="100px" size="mini"
                        class="demo-ruleForm">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="设备名称">
                                    <el-input v-model="queryInfo.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="设备编码">
                                    <el-input v-model="queryInfo.code"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="设备型号">
                                    <el-input v-model="queryInfo.equipmentModelName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="品牌">
                                    <el-input v-model="queryInfo.brand"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="冻存架数量">
                                    <el-col :span="5">
                                        <el-input style="width: 85px;" v-model="queryInfo.shelfCntStart"></el-input>
                                    </el-col>
                                    <el-col style="margin: 0 20px;" class="line" :span="2">-</el-col>
                                    <el-col :span="5">
                                        <el-input style="width: 85px;" v-model="queryInfo.shelfCntEnd"></el-input>
                                    </el-col>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="冻存盒数量">
                                    <el-col :span="5">
                                        <el-input style="width: 85px;" v-model="queryInfo.boxCntStart"></el-input>
                                    </el-col>
                                    <el-col style="margin: 0 20px;" class="line" :span="2">-</el-col>
                                    <el-col :span="5">
                                        <el-input style="width: 85px;" v-model="queryInfo.boxCntEnd"></el-input>
                                    </el-col>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="样本数量">
                                    <el-col :span="5">
                                        <el-input style="width: 85px;" v-model="queryInfo.sampleCntStart"></el-input>
                                    </el-col>
                                    <el-col style="margin: 0 20px;" class="line" :span="2">-</el-col>
                                    <el-col :span="5">
                                        <el-input style="width: 85px;" v-model="queryInfo.sampleCntEnd"></el-input>
                                    </el-col>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="宽度范围">
                                    <el-col :span="5">
                                        <el-input style="width: 85px;" v-model="queryInfo.widthStart"></el-input>
                                    </el-col>
                                    <el-col style="margin: 0 20px;" class="line" :span="2">-</el-col>
                                    <el-col :span="5">
                                        <el-input style="width: 85px;" v-model="queryInfo.widthEnd"></el-input>
                                    </el-col>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="高度范围">
                                    <el-col :span="5">
                                        <el-input style="width: 85px;" v-model="queryInfo.heightStart"></el-input>
                                    </el-col>
                                    <el-col style="margin: 0 20px;" class="line" :span="2">-</el-col>
                                    <el-col :span="5">
                                        <el-input style="width: 85px;" v-model="queryInfo.heightEnd"></el-input>
                                    </el-col>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="深度范围">
                                    <el-col :span="5">
                                        <el-input style="width: 85px;" v-model="queryInfo.depthStart"></el-input>
                                    </el-col>
                                    <el-col style="margin: 0 20px;" class="line" :span="2">-</el-col>
                                    <el-col :span="5">
                                        <el-input style="width: 85px;" v-model="queryInfo.depthEnd"></el-input>
                                    </el-col>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="层次范围">
                                    <el-col :span="5">
                                        <el-input style="width: 85px;" v-model="queryInfo.rowNumsStart"></el-input>
                                    </el-col>
                                    <el-col style="margin: 0 20px;" class="line" :span="2">-</el-col>
                                    <el-col :span="5">
                                        <el-input style="width: 85px;" v-model="queryInfo.rowNumsEnd"></el-input>
                                    </el-col>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="列数范围">
                                    <el-col :span="5">
                                        <el-input style="width: 85px;" v-model="queryInfo.columnNumsStart"></el-input>
                                    </el-col>
                                    <el-col style="margin: 0 20px;" class="line" :span="2">-</el-col>
                                    <el-col :span="5">
                                        <el-input style="width: 85px;" v-model="queryInfo.columnNumsEnd"></el-input>
                                    </el-col>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item>
                            <el-button type="primary" @click="lookget()">查询</el-button>
                            <el-button @click="resetForm()">取消</el-button>
                            <el-button @click="lookresetForm()">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
                <!-- *****************************************************************↑高级查询*********************************************************************************** -->

                <el-button class="add" size="small" @click="addForms()">新增冰箱</el-button>
                <el-button size="small" @click="$router.push('/home/memorychild/rouchild')">容器组管理</el-button>
                <el-button size="small"  @click="$router.push('/home/memorychild/jiachild')">冻存架（分区）管理</el-button>
                <el-button size="small"  @click="$router.push('/home/memorychild/hechild')">冻存盒管理</el-button>
                <el-button style="background-color: #17b3a3;color: #fff;" size="small"
                    @click="exportToExcel">导出EXCEL</el-button>
            </el-header>

            <!-- 列表数据渲染模块 -->
            <el-main>
                <el-row :gutter="20" style="min-width: 977px;" >
                    <el-col  :span="8" v-for="(item, index) in assignmentList" :key="index">
                        <div class="container" 
                            style="height: 216px;box-shadow: 0 1px 17px 0 rgba(0, 0, 0, .1); background-color: #fff;margin-bottom: 15px;">
                            <img src="../assets/images/loginbg.jpeg" alt="" style="width: 100px; height: 110px;">
                            <h2>{{ item.name }}<span>({{ item.brand }})</span></h2>
                            <p><span>编码：</span>BS-{{ item.code }}</p>
                            <p>型号：<span>{{ item.equipmentModelName }}</span></p>
                            <p><span>层列: <em style="color: #20B2AA;"> {{ item.rowNums }}*{{ item.columnNums
                                        }}</em></span>
                                / <span>长宽高: {{ item.width }}*{{ item.depth }}*{{ item.height }}</span></p>
                            <p><span>冻存架:<em style="color: #20B2AA;">{{ item.shelfCnt }}</em></span><span>冻存盒:<em
                                        style="color: #20B2AA;">{{ item.boxCnt }}</em></span><span>样本:<em
                                        style="color: #20B2AA;">{{ item.sampleCnt }}</em></span></p>
                            <div class="btnt">
                                <el-button size="mini" @click="handleEdit(item)">编辑</el-button>
                                <el-button type="primary" size="mini">打开冰箱</el-button>
                                <el-button size="mini" @click=" stateDelete(item.id)">删除</el-button>
                            </div>
                        </div>
                    </el-col>

                </el-row>
            </el-main>





            <!-- 新增或者编辑 -->
            <el-dialog :title="id ? '修改' : '新增'" :visible.sync="dialogFormVisible">
                <el-form :model="sampleCollectList" :rules="rules" ref="sampleCollectList" label-width="100px"
                    size="mini" class="demo-ruleForm">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="容器型号">
                                <el-input v-model="RRRROU.rouqi"></el-input>
                                <el-button type="primary" @click="Rouclick" size="mini">容器选择</el-button>
                            </el-form-item>
                        </el-col>
                        <!-- 容器选择框 -->
                        <el-dialog title="容器选择" :visible.sync="RouqiDiago" append-to-body>
                            <el-input placeholder="搜索参数" size="small" clearable v-model="queryInfo.key"
                                @clear="geRouqiList()" style="width: 150px; margin-right: 15px;"></el-input>
                            <el-button type="primary" size="small">查询</el-button>

                            <el-table :data="Rouqi" size="mini">
                                <el-table-column label="型号编码" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.modeCode }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="型号名称" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.modeName }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="设备类型" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.eqiupmentTypeName }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="备注" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.remark }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" fixed="right" width="100">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handleEditT(scope.row)">选择</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <pagination :page="RouqiPage.page" :componentTotal="RouqiTatol" @changeRows="setRows"
                                @changePage="setPage">
                            </pagination>
                        </el-dialog>




                        <el-col :span="12">
                            <el-form-item label="容器组">
                                <el-input v-model="RRRROU.jia"></el-input>
                                <el-button type="primary" size="mini" @click="jiaclick">容器组选择</el-button>
                            </el-form-item>
                        </el-col>
                        <!-- 容器组选择 -->
                        <el-dialog title="冻存架选择" :visible.sync="JiaDiago" append-to-body>
                            <el-input placeholder="搜索参数" size="small" clearable v-model="queryInfo.key"
                                @clear="geJiaList()" style="width: 150px; margin-right: 15px;"></el-input>
                            <el-button type="primary" size="small">查询</el-button>

                            <el-table :data="Jia" size="mini">
                                <el-table-column label="组编码" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.groupCode }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="组名称" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.groupName }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="管理员" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.managerName }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="组地址" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.groupAddress }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="备注" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.remark }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" fixed="right" width="100">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handleEditTJ(scope.row)">选择</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <pagination :page="JiaPage.page" :componentTotal="JiaTatol" @changeRows="setRows"
                                @changePage="setPage">
                            </pagination>
                        </el-dialog>





                        <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
                        <!-- <el-col :span="24">
                            <el-form-item label="冻存盒">
                                <el-input v-model="RRRROU.box"></el-input>
                                <el-button type="primary" size="mini" @click="heclick">冻存盒选择</el-button>
                            </el-form-item>
                        </el-col> -->
                        <!-- 冻存盒选择 -->
                        <!-- <el-dialog title="冻存盒选择" :visible.sync="heDiago" append-to-body>
                            <el-input placeholder="搜索参数" size="small" clearable v-model="queryInfo.key"
                            @clear="geJiaList()" style="width: 150px; margin-right: 15px;"></el-input>
                            <el-button type="primary" size="small">查询</el-button>
                            
                            <el-table :data="he" size="mini">
                                <el-table-column label="冻存架" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.shelfName }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="第X行" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.rowNo }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="第Y列" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.columnNo }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="规格" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.boxTypeName }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="冻存盒编码" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.code }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="冰箱" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.equipmentName }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="备注" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.remark }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" fixed="right" width="100">
                                    <template slot-scope="scope">
                                        <el-button size="mini"
                                            @click="handleEditTJH( scope.row)">选择</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <pagination :page="hePage.page" :componentTotal="heTatol" @changeRows="setRows" @changePage="setPage">
                            </pagination>
                        </el-dialog> -->
                        <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->





                        <el-col :span="12">
                            <el-form-item label="容器编码">
                                <el-input v-model="sampleCollectList.code" placeholder="编码 不可重复"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="容器名称">
                                <el-input v-model="sampleCollectList.name" placeholder="容器名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="品牌">
                                <el-input v-model="sampleCollectList.brand" placeholder="品牌"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="容器型号">
                                <el-input v-model="sampleCollectList.modelVersion" placeholder="容器型号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="类型">
                                <el-select v-model="sampleCollectList.item" placeholder="请选择类型">
                                    <el-option v-for="(item, index) in item" :key="index" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="位置码类型">
                                <el-select v-model="sampleCollectList.encodingType" placeholder="请选择位置码类型">
                                    <el-option v-for="(item, index) in encodingType" :key="index" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="层数">
                                <el-input-number v-model="sampleCollectList.rowNums" :min="1" :max="100"
                                    @change="Age" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="列数">
                                <el-input-number v-model="sampleCollectList.columnNums" :min="1" :max="100"
                                    @change="column" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="宽度">
                                <el-input-number v-model="sampleCollectList.width" :min="1" :max="100"
                                    @change="width" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="深度">
                                <el-input-number v-model="sampleCollectList.depth" :min="1" :max="100"
                                    @change="depth" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="高度">
                                <el-input-number v-model="sampleCollectList.height" :min="1" :max="100"
                                    @change="height" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="条形码">
                                <el-input v-model="sampleCollectList.barcode"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="二维码">
                                <el-input v-model="sampleCollectList.barcode2"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="硬件编码">
                                <el-input v-model="sampleCollectList.hardcode"></el-input>
                            </el-form-item>
                        </el-col>


                        <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
                        <!-- <el-col :span="12">
                            <el-form-item label="样本采集">
                                <el-input v-model="RRRROU.yangname"></el-input>
                                <el-button type="primary" size="mini" @click="yangclick">样本</el-button>
                            </el-form-item>
                        </el-col> -->
                        <!-- 样本采集选择 -->
                        <!-- <el-dialog title="样本采集选择" :visible.sync="yangDiago" append-to-body>
                            <el-input placeholder="搜索参数" size="small" clearable v-model="queryInfo.key"
                            @clear="geJiaList()" style="width: 150px; margin-right: 15px;"></el-input>
                            <el-button type="primary" size="small">查询</el-button>
                            
                            <el-table :data="yang" size="mini">
                                <el-table-column label="样本编码" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.sampleCode }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="姓名" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.sourceName }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="采集地点" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.collectAddressName }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="性别" width="180">
                                    <template slot-scope="scope">
                                     
                                        <span style="margin-left: 10px" v-show="scope.row.sex == '1'">男</span>
                                        <span style="margin-left: 10px" v-show="scope.row.sex == '2'">女</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="身份证号" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.idCard }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="年龄" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.age }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="备注" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.remark }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="状态" width="180">
                                    <template slot-scope="scope">
                                    
                                        <span style="margin-left: 10px" v-show="scope.row.status == '0'">未审</span>
                                        <span style="margin-left: 10px" v-show="scope.row.status == '1'">已审</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" fixed="right" width="100">
                                    <template slot-scope="scope">
                                        <el-button size="mini"
                                            @click="handleEditTJHY( scope.row)">选择</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <pagination :page="yangPage.page" :componentTotal="yangTatol" @changeRows="setRows" @changePage="setPage">
                            </pagination>
                        </el-dialog> -->
                        <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->

                        <el-col :span="12">
                            <el-form-item label="生产日期">
                                <el-date-picker v-model="sampleCollectList.produceDate" type="date" format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" placeholder="选择日期时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="使用日期">
                                <el-date-picker v-model="sampleCollectList.useDate" type="date" format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" placeholder="选择日期时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="有效日期">
                                <el-date-picker v-model="sampleCollectList.validityDate" type="date" format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" placeholder="选择日期时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="是否大规格">
                                <el-select v-model="sampleCollectList.isLargeSpec" placeholder="是否大规格">
                                    <el-option v-for="(item, index) in isLargeSpecL" :key="index" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="状态">
                                <el-radio-group v-model="sampleCollectList.state">
                                    <el-radio label="1">启用</el-radio>
                                    <el-radio label="2">禁用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="排序码">
                                <el-input-number v-model="sampleCollectList.sortCode" :min="1" :max="100"
                                    @change="Age" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="备注">
                                <el-input type="textarea" :rows="2" placeholder="请输入内容"
                                    v-model="sampleCollectList.remark">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button v-if="id" type="primary" @click="editForm()">修改</el-button>
                        <el-button v-else type="success" @click="addForm()">添加</el-button>
                        <el-button @click="resetForm(sampleCollectList)">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>

            <pagination :page="queryInfo.page" :componentTotal="total" @changeRows="setRows" @changePage="setPage">
            </pagination>


        </main>
    </div>
</template>

<script>
import Pagination from "./Pagination.vue";
// import { excelExportUseJson } from "../excel/xlsx.js";
export default {
    data() {
        return {
            id: '',
            dialogFormVisible: false,
            dialoglook: false,
            total: 0,
            queryInfo: {
                t: '',
                page: 1,
                limit: 10,
                key: '',
                name: '',//设备名称
                code: '',//设备编码
                equipmentModelName: '',//设备型号
                brand: '',//品牌
                shelfCntStart: '',//架开
                shelfCntEnd: '',//架结束
                boxCntStart: '',//盒开始
                boxCntEnd: '',//盒结束
                sampleCntStart: '',//样本数量开始
                sampleCntEnd: '',//样本数量结束
                rowNumsStart: '',//层开始
                rowNumsEnd: '',//层结束
                columnNumsStart: '',//列开始
                columnNumsEnd: '',//列结束
                widthStart: '',//宽度开口
                widthEnd: '',//宽度结束
                heightStart: '',//高开始
                heightEnd: '',//高结束
                depthStart: '',//深开始
                depthEnd: '',//深结束
            },
            //存储查询的列表数据
            assignmentList: [],
            //信息新增【+++++++++】
            sampleCollectList: {
                "t": 1729490040907,
                "equipmentModelId": 17,//容器型号ID
                "equipmentGroupId": 2,//容器组ID
                "code": "AABB",//容器编码
                "name": "CCDD",//容器名称
                "brand": "海尔",//品牌--联动
                "modelVersion": "DW-86L388J",//型号--联动
                "item": 3,// 类型 1立式 2卧室 3液氮罐
                "encodingType": 1,//位置码 1村数字 2混合
                "rowNums": 2,//层
                "columnNums": 3,//列
                "width": 4,//宽度
                "depth": 5,//深度
                "height": 6,//高度
                "sampleType": "",
                "barcode": "条形码非",//条形码
                "barcode2": "二维码非必须",//二维码
                "hardcode": "硬件吗非必须",//硬件码
                "state": 2,//禁用状态 1启用 2禁用
                "sortCode": 9,//排序码
                "isLargeSpec": 1,//是否大规格 1大规格 2普通
                "produceDate": "2024-12-01 00:00:00",//生产日期
                "useDate": "2024-12-02 00:00:00",//使用日期
                "validityDate": "2024-12-03 00:00:00",//有效日期
                "createOn": "2024-10-21 13:48:14",
                "createUserId": "",
                "createBy": "",
                "modifiedOn": "2024-10-21 13:48:14",
                "modifiedUserId": "",
                "modifiedBy": "",
                "remark": "备注"//备注
            },
            //信息添加时候弹出的表单数据
            RRRROU: {
                rouqi: '',//容器名称
                jia: '',//冻存架
            },
            item: [
                { label: "立式", value: "1" },
                { label: "卧式", value: "2" },
                { label: "液氮罐", value: "3" },
            ],
            encodingType: [
                { label: "纯数字", value: "1" },
                { label: "混合", value: "2" },
            ],
            isLargeSpecL: [
                { label: "大规格", value: "0" },
                { label: "普通", value: "1" },
            ],

            rules: {
                idCard: [
                    { min: 15, max: 15, required: true, message: "请填写正确身份证号", trigger: "blur" },
                ],
                sampleTypeName: [
                    { required: true, message: "样本类型不能为空", trigger: "change" },
                ],
                sampleCode: [
                    { required: true, message: "样本编号不能为空", trigger: "blur" },
                ],
                code: [
                    { required: true, message: "任务编码不能为空", trigger: "blur" },
                ],
                name: [
                    { required: true, message: "名称不能为空", trigger: "blur" },
                ],
            },

            //容器数据
            RouqiDiago: false,//容器弹框
            Rouqi: [],//容器数据
            RouqiTatol: 0,//最大页码
            RouqiPage: {//页码树
                page: 1,
                limit: 10,
                k: '',
                t: '',
            },

            //冻存架数据
            JiaDiago: false,//冻存架弹框
            Jia: [],//冻存架数据
            JiaTatol: 0,//最大页码
            JiaPage: {//页码树
                page: 1,
                limit: 10,
                k: '',
                t: '',
            },



            //打印模板
            listHeader: {
                age: '年龄',
                equipmentName: '样本编码',
                remark: '备注'
            },
        }
    },
    methods: {
        //容器的查询
        async geRouqiList() {
            this.RouqiPage.t = new Date().getTime()
            const { data: res } = await this.axios.get("api/biosample/equipmentmodel/list", {
                params: this.RouqiPage
            })
            // console.log(res);
            this.Rouqi = res.page.list;
            // console.log(this.assignmentList);
            this.RouqiTatol = res.page.totalCount;//最大页数
            if (res.code != 0) return this.$message.error("获取容器列表失败");
        },
        //容器的选择
        handleEditT(row) {
            // console.log(row);
            this.RRRROU.rouqi = row.modeName;
            this.sampleCollectList.equipmentModelId = row.id;
            this.sampleCollectList.brand = row.brands;
            this.sampleCollectList.modelVersion = row.modeCode;
            this.RouqiDiago = false;
        },
        //容器弹出框
        Rouclick() {
            this.RouqiDiago = true;
            this.geRouqiList();
        },
        //----------------------------------------------------------------------------------------------------------------
        //冻存架查询
        async geJiaList() {
            this.JiaPage.t = new Date().getTime()
            const { data: res } = await this.axios.get("api/biosample/equipmentgroup/list", {
                params: this.JiaPage
            })
            // console.log(res);
            this.Jia = res.page.list;
            // console.log(this.assignmentList);
            this.JiaTatol = res.page.totalCount;//
        },
        //架子的选择
        handleEditTJ(row) {
            // console.log(row);
            this.RRRROU.jia = row.groupName;
            this.sampleCollectList.equipmentGroupId = row.id;
            this.JiaDiago = false;
        },
        //冻存架弹出框
        jiaclick() {
            this.JiaDiago = true;
            this.geJiaList();
        },
        //--------------------------------------------------------------------------------------------------------------





        //-----------------------------------------------------------------------------------------------------------
        //高级查询
        handleCommand(command) {
            // this.$message('click on item ' + command);
            if (command == "a") {
                this.dialoglook = true;
            } else {
                this.lookresetForm()
            }
        },
        lookget() {
            this.getassignmentList();
            this.dialoglook = false;
        },

        //导出EXCEL
        exportToExcel() {
            // let formatList = this.assignmentList
            // formatList.map(el => {
            //     el.sex = el.sex == 1 ? "男" : '女';
            //     el.pregnant = el.pregnant == 0 ? "否" : "是";
            //     el.state = el.state == 1 ? "入库" : "出库";
            //     el.status = el.status == 0 ? "未审" : "已审"
            // })
            // excelExportUseJson(formatList, this.listHeader, "样本采集信息表");
        },




        //编辑操作--打开模态框
        handleEdit(row) {
            this.id = row.id;
            this.dialogFormVisible = true;
            this.editID()
        },
        //编辑回显--ID查询
        async editID() {
            // console.log(row);
            this.dialogFormVisible = true;
            const { data: res } = await this.axios.get(`api/biosample/equipment/detail-info/${this.id}`);
            // console.log(res);
            this.sampleCollectList = res.equipment;
            this.RRRROU.rouqi = res.equipment.equipmentModelName;
            this.RRRROU.jia = res.equipment.equipmentGroupName;
        },
        //提交编辑
        async editForm() {
            this.sampleCollectList.t = new Date().getTime();
            const { data: res } = await this.axios.post("api/biosample/equipment/update", this.sampleCollectList);
            if (res.code != 0) return this.$message.error("修改失败");
            this.$message.success("修改成功");
            this.dialogFormVisible = false;
            this.getassignmentList();
        },



        //添加操作
        addForms() {
            this.id = '';
            this.sampleCollectList = {
                "t": 1729490040907,
                "equipmentModelId": 0,//容器型号ID
                "equipmentGroupId": 0,//容器组ID
                "code": "",//容器编码
                "name": "",//容器名称
                "brand": "",//品牌--联动
                "modelVersion": "",//型号--联动
                "item": '',// 类型 1立式 2卧室 3液氮罐
                "encodingType": '',//位置码 1村数字 2混合
                "rowNums": 1,//层
                "columnNums": 1,//列
                "width": 1,//宽度
                "depth": 1,//深度
                "height": 1,//高度
                "sampleType": "",
                "barcode": "",//条形码
                "barcode2": "",//二维码
                "hardcode": "",//硬件码
                "state": 2,//禁用状态 1启用 2禁用
                "sortCode": 1,//排序码
                "isLargeSpec": 1,//是否大规格 1大规格 2普通
                "produceDate": "2024-10-21 13:48:14",//生产日期
                "useDate": "2024-10-21 13:48:14",//使用日期
                "validityDate": "2024-10-21 13:48:14",//有效日期
                "createOn": "2024-10-21 13:48:14",
                "createUserId": "",
                "createBy": "",
                "modifiedOn": "2024-10-21 13:48:14",
                "modifiedUserId": "",
                "modifiedBy": "",
                "remark": "备注"//备注
            }
            this.dialogFormVisible = true;
        },
        // 获取任务列表
        async getassignmentList() {
            this.queryInfo.t = new Date().getTime()
            const { data: res } = await this.axios.get("api/biosample/equipment/list", {
                params: this.queryInfo
            })
            // console.log(res);
            this.assignmentList = res.page.list;
            // console.log(this.assignmentList);
            this.total = res.page.totalCount;//最大页数
            if (res.code != 0) return this.$message.error("获取任务列表失败");
        },
        //添加新增
        async addForm() {
            // console.log(formName);
            this.sampleCollectList.t = new Date().getTime();
            const { data: res } = await this.axios.post("api/biosample/equipment/save", this.sampleCollectList);
            if (res.code != 0) return this.$message.error("新增录入失败");
            this.$message.success("新增录入成功");
            this.dialogFormVisible = false;
            this.getassignmentList();
        },


        //删除操作
        stateDelete(id) {
            // console.log(id);
            this.$confirm(`是否选择[${id}]数据?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.stateRowss(id);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消",
                    });
                });
        },
        //删除提交
        async stateRowss(id) {
            // console.log(this.selectedRows);
            const { data: res } = await this.axios.post("api/biosample/equipment/delete", [id]);
            if (res.code != 0) return this.$message.error("删除失败");
            this.$message.success("删除成功");
            this.getassignmentList();
        },





        // 分页器
        setRows(val) {
            this.queryInfo.limit = val;
            this.getassignmentList();
            this.RouqiPage.limit = val;
            this.JiaPage.limit = val;
            this.geRouqiList();
            this.geJiaList();

        },
        setPage(val) {
            this.queryInfo.page = val;
            this.getassignmentList();
            this.RouqiPage.page = val;
            this.JiaPage.page = val;
            this.geRouqiList();
            this.geJiaList();

        },

        //重置
        lookresetForm() {
            const defaultQueryInfo = {
                page: 1,
                limit: 10,
                t: '',
                name: '',//设备名称
                code: '',//设备编码
                equipmentModelName: '',//设备型号
                brand: '',//品牌
                shelfCntStart: '',//架开
                shelfCntEnd: '',//架结束
                boxCntStart: '',//盒开始
                boxCntEnd: '',//盒结束
                sampleCntStart: '',//样本数量开始
                sampleCntEnd: '',//样本数量结束
                rowNumsStart: '',//层开始
                rowNumsEnd: '',//层结束
                columnNumsStart: '',//列开始
                columnNumsEnd: '',//列结束
                widthStart: '',//宽度开口
                widthEnd: '',//宽度结束
                heightStart: '',//高开始
                heightEnd: '',//高结束
                depthStart: '',//深开始
                depthEnd: '',//深结束
            };

            this.queryInfo = { ...defaultQueryInfo };
            this.getassignmentList();
        },
        //取消操作
        resetForm() {
            this.dialogFormVisible = false;
            this.dialoglook = false;
            this.id = '';
        },

        //加减框
        //层
        Age(val) {
            this.sampleCollectList.rowNums = val;
        },
        //列
        column(val) {
            this.sampleCollectList.columnNums = val;
        },
        //宽
        width(val) {
            this.sampleCollectList.width = val;
        },
        //深
        depth(val) {
            this.sampleCollectList.depth = val;
        },
        //高
        height(val) {
            this.sampleCollectList.height = val;
        }
    },
    mounted() {
        this.getassignmentList()
    },
    components: {
        Pagination
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
    text-align: center;
}

.container {

    img {
        float: left;
    }

    h2 {
        // margin: 14px 0;
        padding: 8px;
        padding-bottom: 5px;
        font-size: 16px;
    }

    p {
        margin: 5px 0;

    }

    p:nth-of-type(4) {
        // background-color: #000;
        text-align: center;
        margin: 10px 0;
        margin-bottom: 20px;

        span {
            padding: 0 10px;
        }
    }

    .btnt {
        text-align: center;
    }
}

main {
    background-color: #fff;
    padding: 20px;
    overflow: hidden;
}

.el-header {
    padding: 0;
    float: left;
    width: 100%;
    ;

    .el-input {
        width: 185px;
        margin-right: 15px;
    }

    .delet {
        color: #fff;
        background-color: #fab6b6;
        border-color: #fab6b6;
    }

    .active {
        color: #fff;
        background-color: #f56c6c;
        border-color: #f56c6c;
    }

    .add {
        color: #fff;
        background-color: #17b3a3;
        border-color: #17b3a3;
    }
}

::v-deep input[aria-hidden="true"] {
    display: none !important;
}

::v-deep .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none;
}
</style>